<template>
    <div class="header">
        <div class="left">
            <div class="back" @click="back()">返回</div>
            <div class="save" @click="save()">保存排序</div>
        </div>
        <div class="title">图片排序</div>
    </div>
    <div class="List">
        <TransitionGroup ref="el" type="transition" tag="ul" :name="!drag ? 'fade' : null">
            <li v-for="item in testlist" :key="item.id" class="item">
                <img :src="item.url" alt="">
                <span>{{ item.id }}</span>
            </li>
        </TransitionGroup>
    </div>

</template>

<script setup>
import { nextTick, ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from "vue-router";
import useImgStore from "../store/img"
const router = useRouter();
const route = useRoute();
import request from '../utils/request';
let imgMsg = reactive(JSON.parse(route.query.imgMsg));
let imgIndex = reactive(JSON.parse(route.query.index));
onMounted(() => {
})
//获取图片数据
const imgStore = useImgStore()

const back = () => {
    router.back()
}
const save = async () => {
    const username = localStorage.getItem('username')
    let updatePerson = {
        username: username,
        imgname: imgMsg.title,
        updateTime: formatDate(new Date())
    }
    let updateData = {
        finish: true,
        list: imgMsg.list
    }
    const res = await request.put("/img", { _id: imgMsg._id, ...updateData });
    imgMsg.finish = true
    imgStore.imgMsg[imgIndex] = imgMsg
    const res2 = await request.post("/history", updatePerson);
    router.back()
}

//实现拖拽功能
import { useDraggable } from 'vue-draggable-plus'
let testlist = imgMsg.list
const drag = ref(false)
const el = ref()
useDraggable(el, testlist, {
    animation: 150,
    onStart(event) {
        drag.value = true
    },
    onEnd(event) {
        nextTick(() => {
            drag.value = false
        })
    }
})
//时间过滤器
const formatDate = (date) => {
    let time = new Date(date)
    let year = time.getFullYear()
    let month = time.getMonth() + 1
    let day = time.getDate()
    let hour = time.getHours()
    let minute = time.getMinutes()
    let second = time.getSeconds()
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
</script>
<style scoped lang="less">
.header {
    width: 100%;
    height: 10vh;
    text-align: center;
    position: relative;
    background: skyblue;
    color: #fff;

    .left {
        position: absolute;
        top: 50%;
        left: 1vw;
        transform: translateY(-50%);
        display: flex;

        .back,
        .save {
            padding: 1vw;
            font-size: 1rem;
            margin-left: 1vw;
            background-color: #fff;
            color: #000;
            transition: all .3s;

            &:hover {
                cursor: pointer;
                transform: translateX(-2px);
            }
        }
    }

    .title {
        font-size: 2rem;
        line-height: 10vh;
    }
}

.List ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    padding-bottom: 10vw;

    .item {
        background-color: #fff;
        position: relative;
        box-sizing: border-box;
        width: 20%;
        height: 15vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 2vw;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        &:hover {
            cursor: pointer;
        }

        img {
            width: 100%;
            height: 100%;
        }

        span {
            position: absolute;
            right: -1vw;
            top: -1vw;
            width: 3vw;
            height: 3vw;
            border-radius: 50%;
            background-color: skyblue;
            color: #fff;
            font-size: 1rem;
            text-align: center;
            line-height: 3vw;
        }
    }
}
</style>